<template>
  <div class="custom-quality-engineering-container page-common-layout">
    <div class="screen-conditions-container">
      <a-select
        showSearch
        :filter-option="filterOption"
        v-model="condition.tenantCode"
        :loading="projectLoading"
        placeholder="请选择项目"
        @change="changeProject($event)"
        class="project-select"
      >
        <a-select-option
          :value="item.proCode"
          v-for="item in projectSoucre"
          :key="item.uuid"
        >
          {{ item.proName }}
        </a-select-option>
      </a-select>
      <a-select
        showSearch
        :filter-option="filterOption"
        placeholder="请选择任务状态"
        v-model="condition.taskStatus"
      >
        <a-select-option value="0"> 待发布 </a-select-option>
        <a-select-option value="1"> 资料提交 </a-select-option>
        <a-select-option value="2"> 待评分 </a-select-option>
        <a-select-option value="3"> 已完成 </a-select-option>
      </a-select>
      <div class="group-button">
        <a-button class="cu-btn-primary" icon="search" @click="search()">
          查询
        </a-button>
        <a-button class="cu-btn-filter" icon="reload" @click="reset()">
          重置
        </a-button>
      </div>
    </div>
    <div class="table-container">
      <div class="header" header="专家评分">
        <a-button @click="gotoNotInvolve()"> 不涉及项确认 </a-button>
      </div>
      <div class="main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="taskName" title="任务名称"> </vxe-column>
          <vxe-column field="proName" title="项目名称"> </vxe-column>
          <vxe-column field="modelName" title="评价标准名称"> </vxe-column>
          <vxe-column field="orgCodeNames" title="责任主体"> </vxe-column>
          <vxe-column title="专家评分/总分（分）">
            <template #default="{ row }">
              <span class="own"> {{ row.finalScore || "-" }}</span
              >/{{ row.totalScore || "-" }}
            </template>
          </vxe-column>
          <vxe-column title="状态">
            <template #default="{ row }">
              <div :class="[checkStatusClass(row), 'status-text']">
                {{ row.taskStatusDesc }}
              </div>
            </template>
          </vxe-column>
          <vxe-column field="deadline" title="资料上传截止时间"> </vxe-column>
          <vxe-column
            field="operate"
            width="220"
            title="操作"
            fixed="right"
            align="left"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="gotoView(row)" v-if="row.kspf">
                  开始评分
                </a-button>
                <a-button type="link" @click="gotoView(row)" v-if="row.view">
                  查看
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 查看页面 -->
    <viewModal
      :visible.sync="viewModalVisible"
      :soucre="dataSoucre"
      @cancel="handelCancel()"
      :key="viewModalKey"
    ></viewModal>
    <!-- 不涉及项确认 -->
    <notInvolve
      :visible.sync="notInvolveVisible"
      :soucre="dataSoucre"
      @ok="handelOk()"
      @cancel="handelCancel()"
      :key="notInvolveKey"
    ></notInvolve>
  </div>
</template>

<script>
// 查看
import viewModal from "./components/viewModal";
import notInvolve from "./components/notInvolve";
import { axios } from "@/utils/request";
import { getPZGCProList } from "@/api/qualityEngineering";
export default {
  components: {
    viewModal,
    notInvolve,
  },
  data() {
    return {
      //项目下拉框
      projectSoucre: [],
      projectLoading: false,
      condition: {
        //项目
        tenantCode: undefined,
        //状态
        taskStatus: undefined,
      },
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      //查看
      viewModalVisible: false,
      viewModalKey: "view_modal_01",
      //不涉及项确认
      notInvolveVisible: false,
      notInvolveKey: "not_involve_01",
      dataSoucre: {},
    };
  },
  mounted() {
    this.getProjectData();
  },
  methods: {
    gotoView(row) {
      this.viewModalKey = Date.now();
      this.dataSoucre = row;
      this.viewModalVisible = true;
    },
    // 不涉及项确认
    gotoNotInvolve() {
      this.notInvolveKey = Date.now();
      this.notInvolveVisible = true;
    },
    handelOk() {
      this.notInvolveVisible = false;
      this.getTableData();
    },
    handelCancel() {
      this.viewModalVisible = false;
      this.notInvolveVisible = false;
      this.getTableData();
    },

    changeProject() {
      this.getData();
    },

    //查询项目下拉框
    getProjectData() {
      this.projectLoading = true;
      return new Promise((resolve, reject) => {
        getPZGCProList({ type: 1 })
          .then((res) => {
            this.projectSoucre = res?.data ?? [];
            this.condition.tenantCode =
              this.projectSoucre?.[0]?.proCode ?? undefined;
            if (!this.condition.tenantCode) {
              return;
            }
            this.getData();
            resolve();
          })
          .catch((_) => {
            this.condition.tenantCode = undefined;
            this.projectSoucre = [];
            reject();
          })
          .finally((_) => {
            this.projectLoading = false;
          });
      });
    },

    getData() {
      Promise.all([this.getTableData()])
        .then()
        .finally((_) => {});
    },

    search() {
      this.pager.page = 1;
      this.getTableData();
    },

    reset() {
      this.condition.taskStatus = undefined;
      this.search();
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { taskStatus = "", tenantCode = "" } = this.condition;
      axios
        .post(
          `/probusiness/qeTaskConfigDetail/getList?pageNo=${page}&pageSize=${pageSize}`,
          {
            tenantCode,
            taskStatus,
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          this.tableData = res.data?.rows || [];
          this.pager.total = res.data?.totalCount || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //校验状态className
    checkStatusClass(row) {
      let { taskStatus } = row;
      switch (taskStatus) {
        case 0:
          return "cancel";

        case 1:
          return "warn";

        case 2:
          return "lock";

        case 3:
          return "normal";

        default:
          return "cancel";
      }
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.table-container {
  .own {
    color: #3759a0;
  }
  .status-text {
    border-radius: 4px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 12px;
    width: 80px;
    &.warn {
      background: #ff993f;
    }
    &.normal {
      background: #4bc964;
    }
    &.error {
      background: #ff3f4a;
    }
    &.lock {
      background: #0098ff;
    }
    &.cancel {
      background: #f1f2f7;
      color: #aab0bc;
    }
  }
}
</style>
